<template>
  <div class="position-container">
    <div class="tabs-warp">
      <van-tabs v-model:active="state.active" type="card">
        <van-tab title="市级部门/市属企业" name="1"></van-tab>
        <van-tab title="区县部门" name="2"></van-tab>
        <van-tab title="属地镇街" name="3"></van-tab>
      </van-tabs>
    </div>
    <div class="table-warp">
      <table class="info-table">
        <thead>
          <tr>
            <th>序号</th>
            <th >单位类型</th>
            <th>单位名称</th>
            <th>发送内容</th>
            <th>发送时间</th>
            <th>反馈状态</th>
            <th>反馈内容</th>
            <th>反馈时间</th>
            <th>附件</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tableData" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ item.fxdwmc }}</td>
            <td>{{ item.fxdwbh }}</td>
            <td>{{ item.ssjd }}</td>
            <td>{{ item.dwlx }}</td>
            <td>{{ item.ssyw }}</td>
            <td>{{ item.dz }}</td>
            <td>{{ item.glhl }}</td>
            <td>{{ item.zrdw }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, reactive } from "vue";
const tableData = ref([
  {
    fxdwmc: "新桥街道石梯沟支路新",
    fxdwbh: "50010600106004000405",
    dwlx: "下穿道",
  },
  {
    fxdwmc: "新桥街道石梯沟支路新",
    fxdwbh: "50010600106004000405",
    dwlx: "下穿道",
  },
]);

const state = reactive({
  active: 0,
});
</script>

<style lang="less" scoped>
.position-container {
  width: 100%;
  overflow: hidden;
  .table-warp {
    width: 100%;
    overflow: auto;
  }
  .info-table {
    // width: 100%;
    border-collapse: collapse;
    th,
    td {
      border: 1px solid #797979;
      padding: 8px;
      text-align: center;
      background: #fff;
      max-width: 180px; /* 设置单元格的最大宽度 */
      white-space: nowrap; /* 防止文本换行 */
      overflow: hidden; /* 隐藏超出部分 */
      text-overflow: ellipsis; /* 超出部分显示省略号 */
    }

    th {
      // background: #f5f5f5;
      font-weight: normal;
      color: #000;
      background: #e6e6e6;
    }

    td {
      color: #000;
    }
  }
}

.tabs-warp {
  margin: 10px 0;
  //   width: 100px;
}
</style>
